<template>
    <div class="own_article_tab">
        <el-button type="primary" @click="editArticle(null)">发布贴文</el-button>
        <div class="own_article_list">
            <div class="own_article_item" v-for="article in articleList" :key="article.articleId">
                <article-component :title="article.articleTitle" :desc="article.articleDesc"
                    :authorPic="article.authorPicUrl" :cover="article.articleCoverUrl" :id="article.articleId"
                    :eye="article.articleEye" :comment-count="article.commentCount" :timestamp="article.articleDate"
                    :nickName="article.articleNickname" />
                <el-dropdown style="float:right;margin: 20px auto 0px;color: var(--el-color-primary);">
                    <span class="el-dropdown-link">
                        编辑
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="editArticle(article.articleId)">修改</el-dropdown-item>
                            <el-dropdown-item @click="negative(1,article.articleId,article.articleStatus == '封禁' ?0:1)">
                                {{ article.articleStatus == '封禁' ? '发布' : '封禁' }}</el-dropdown-item>
                            <el-dropdown-item @click="negative(2,article.articleId,0)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown><el-divider style="float:right" border-style="dotted" />
            </div>
        </div>
        <!-- <el-pagination style="display:flex;justify-content: center;" background layout="prev, pager, next"
            :hide-on-single-page="true" :total="1000" /> -->
    </div>
</template>

<script>
import ArticleComponent from '../ArticleComponent.vue'
import { ElMessage } from 'element-plus'

export default {
    components: { ArticleComponent },
    data() {
        return {
            articleList: []
        }
    },
    created() {
        this.getArticleList()
    },
    methods: {
        editArticle(articleId) {
            if (articleId == null)
                window.open(document.location.origin + '/edit/article_edit.html')
            else window.open(document.location.origin + '/edit/article_edit.html?article_id=' + articleId)
        },
        negative(flag, articleId,value) {
            let url = '/article/negative/' + flag + '/' + articleId+'/'+value
            this.$store.state.ajaxQueue.length++
            this.$request.get(url).then(resp => {
                this.$store.state.ajaxQueue.finished++
                ElMessage({
                    message: resp.data ? '操作成功' : '操作失败',
                    type: resp.data ? "success" : "error",
                })
                this.getArticleList()
            })
        },
        getArticleList(){
            this.$store.state.ajaxQueue.length++
            this.$request.get('/article/user_article_list').then(data => {
                this.$store.state.ajaxQueue.finished++
            this.articleList = data.data
            if (this.articleList == null) return
            this.articleList.sort((article1, article2) => article2.articleDate - article1.articleDate)
        })
        }
    },

}
</script>

<style scoped>
.own_article_list {
    display: flex;
    flex-wrap: wrap;
}

.own_article_item {
    padding: 10px;
    width: 50%;
}
</style>